<template>
  <div id="about-detail" :style="'background: url(' + bgImg + ')  no-repeat center'">
    <header-inner class="header-inner"/>
    <side-bar-inner class="side-bar-inner"/>
    <div class="container">
      <About class="about"/>
    </div>
  </div>
</template>

<script>
import HeaderInner from "@/components/blog/blogs/HeaderInner";
import SideBarInner from "@/components/blog/blogs/SideBarInner";
import About from "@/components/blog/blogs/About";

import bgImg from "@/assets/background/明日方舟-情人节.jpg";

export default {
  name: "AboutDetail",
  data() {
    return {
      bgImg
    }
  },
  components: {
    HeaderInner,
    SideBarInner,
    About
  }
}
</script>

<style scoped>
  #about-detail {
    height: 100%;
  }

  #about-detail .header-inner {
    z-index: 1;
    position: absolute;
    top: 10px;
    right: 71%;
    width: 12%;
  }

  #about-detail .side-bar-inner {
    position: absolute;
    top: 220px;
    right: 71%;
    width: 12%;
  }

  #about-detail .container {
    overflow: auto;
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
  }

  #about-detail .container .about {
    position: absolute;
    top: 10px;
    left: 30%;
    width: 50%;
    margin-bottom: 90px;
  }
</style>